<template>
  <div class="top-bar">
    <div class="top-contents">
      <!--logo部分-->
      <logo />
      <!--功能部分-->
      <div class="function-list">
        <ul>
          <li v-for="(item, index) in functionList" :key="index">
            <div
              :class="
                item.type == 'self' && item.isSelected
                  ? 'iconfont icon-triangle'
                  : ''
              "
            ></div>
            <div :class="'hot-tag' + (item.isHot ? ' show-hot-tag' : '')">
              hot
            </div>
            <a :class="item.isSelected ? 'selected' : ''" :href="item.link">{{
              item.label
            }}</a>
          </li>
        </ul>
      </div>
      <div class="top-right clearfix">
        <!--搜索栏部分-->
        <input-box icon="search" placeHolder="音乐/视频/电台/用户"></input-box>
        <!--剩余功能部分-->
        <div class="remain">
          <button>创作者中心</button>
          <a href="#">登录</a>
        </div>
      </div>
    </div>
    <!--搜索栏下方部分-->
    <div class="sub-contents">
      <div v-if="showSubContents">
        <div class="sub-sort">
          <ul>
            <li v-for="(item, index) in sortList" :key="index">
              <a :class="item.isSelected ? 'selected' : ''" :href="item.link">{{
                item.label
              }}</a>
              <div
                :class="
                  'sub-special-tag' +
                  (item.isSpecial ? ' show-sub-specail-tag' : '')
                "
              >
                &reg;
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div v-else class="empty-border"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import inputBox from "./music-input.vue";
import logo from "./music-logo.vue";
const showSubContents = ref(true);
const functionList = [
  {
    label: "发现音乐",
    link: "localhost:3000",
    isSelected: true,
    type: "self",
    isHot: false,
  },
  {
    label: "我的音乐",
    link: "https://music.163.com/#/my/",
    isSelected: false,
    type: "self",
    isHot: false,
  },
  {
    label: "关注",
    link: "https://music.163.com/#/friend",
    isSelected: false,
    type: "self",
    isHot: false,
  },
  {
    label: "商城",
    link: "https://music.163.com/store/product",
    isSelected: false,
    type: "jump",
    isHot: false,
  },
  {
    label: "音乐人",
    link: "https://music.163.com/st/musician",
    isSelected: false,
    type: "self",
    isHot: false,
  },
  {
    label: "下载客户端",
    link: "https://music.163.com/#/download",
    isSelected: false,
    type: "self",
    isHot: true,
  },
];
const sortList = [
  {
    label: "推荐",
    link: "https://music.163.com/#/discover",
    isSelected: false,
    isSpecial: false,
  },
  {
    label: "排行榜",
    link: "https://music.163.com/#/discover",
    isSelected: false,
    isSpecial: false,
  },
  {
    label: "歌单",
    link: "https://music.163.com/#/discover",
    isSelected: true,
    isSpecial: true,
  },
  {
    label: "主播电台",
    link: "https://music.163.com/#/discover",
    isSelected: false,
    isSpecial: false,
  },
  {
    label: "歌手",
    link: "https://music.163.com/#/discover",
    isSelected: false,
    isSpecial: false,
  },
  {
    label: "新碟上架",
    link: "https://music.163.com/#/discover",
    isSelected: false,
    isSpecial: false,
  },
];
</script>

<style>
@import "../assets/css/header.css";
.hot-tag {
  position: absolute;
  right: -20px;
  top: 10px;
  background-color: #c20c0c;
  padding: 5px 6px;
  border-radius: 20px;
  height: 6px;
  line-height: 6px;
  color: rgb(255, 255, 255);
  font-size: 10px;
  display: none;
}
.show-hot-tag {
  display: block;
}
.sub-special-tag {
  position: absolute;
  top: 0px;
  right: 2px;
  transform: scale(0.7);
  display: none;
}
.show-sub-specail-tag {
  display: block;
}
</style>
